<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<title>Quik Demo Page</title>
	<script src="<c:url value="/resources/js/jquery-1.7.2.js"/>"></script>
	<script src="<c:url value="/resources/js/jquery-ui-1.10.4.custom.js"/>"></script>
	<link href="<c:url value="/resources/css/start/jquery-ui-1.10.4.custom.css"/>" rel="stylesheet" />
	<script>
	
	$(function() {
	
		$( "#typeDivId" ).buttonset();
		$( "#areaDivId" ).buttonset();
		/*
		$( "#btn1" ).button();
		$( "#btn2" ).button();
		$( "#btn3" ).button();
		$( "#btn4" ).button();
		$( "#btn5" ).button();
		$( "#btn6" ).button();
		$( "#prevBtn" ).button();
		$( "#nextBtn" ).button();
		*/
		$('.quik-btn').button();
	});

	function operateTaggle(flag){
		if(flag){
			$('#billingDetail').hide();
			$('#statusOverview').show();
		} else {
			$('#billingDetail').show();
			$('#statusOverview').hide();
		}
	}
	function emptyAction(){
		alert('开单');
	}
	</script>
	<style>
	body{
		font: 80% "微软雅黑", "YouYuan";
		margin: 10px;
	}
	</style>
</head>
<body>
<table style='border:0px solid black;width:1170px;' align='center'>
<tr>
<td align='center' style='width:50%'>
<table style='border:0px solid green;width:100%'>
<tr><!-- searching criteria button list row -->
<td><div id='typeDivId'>
<!--
<input type='radio' name='type' class='quik-std-btn' value='男宾' id='btn1' />
<input type='radio' name='type' class='quik-std-btn' value='女宾' id='btn2' />
<input type='radio' name='type' class='quik-std-btn' value='儿童' id='btn3' />
-->
<input type="radio" id="type0" name="type"><label for="type0">所有</label>
<input type="radio" id="type1" name="type"><label for="type1">男宾</label>
<input type="radio" id="type2" name="type"><label for="type2">女宾</label>
<input type="radio" id="type3" name="type"><label for="type3">儿童</label>
</div>
<div id='areaDivId'>
<input type="radio" id="radio0" name="area"><label for="radio0">所有</label>
<input type="radio" id="radio1" name="area"><label for="radio1">东区</label>
<input type="radio" id="radio2" name="area"><label for="radio2">南区</label>
<input type="radio" id="radio3" name="area"><label for="radio3">北区</label>
<!--
<input type='radio' name='area' class='quik-std-btn' value='东区' id='btn4' />
<input type='radio' name='area' class='quik-std-btn' value='南区' id='btn5' />
<input type='radio' name='area' class='quik-std-btn' value='北区' id='btn6' />
-->
</div>
</td>
</tr>
<tr><!-- result list row -->
<td>
<table style='border:0px solid green;width:100%' cellspacing=2 cellpadding=2>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
<tr align='center'>
<td style='border:1px solid green;background:orange' onclick='operateTaggle(false);'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
<td style='border:1px solid lightgreen;background-color:lightgreen' onclick='emptyAction()'>AAA</td>
</tr>
</table>
<button class='quik-btn'>上一页</button>
<span>1</span>/<span>1</span>
<button class='quik-btn'>下一页</button>
</td>
</tr>
</table>
</td>
<td style='vertical-align:top'>



<div id='statusOverview' style='display:'>
	<table style='border:1px solid gray;width:100%;' cellspacing=2 cellpadding=2>

	<tr>
	<td style='border:1px solid gray;width:25%;background-color:lightgreen'>空闲</td>
	<td style='border:1px solid gray;width:25%'>5</td>
	<td style='border:1px solid gray;width:25%;background-color:orange'>在用</td>
	<td style='border:1px solid gray;'>21</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:25%;'>男宾手牌数量</td>
	<td style='border:1px solid gray;width:25%'>20</td>
	<td style='border:1px solid gray;width:25%;'>女宾手牌数量</td>
	<td style='border:1px solid gray;'>20</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:25%;'>儿童手牌数量</td>
	<td style='border:1px solid gray;width:25%'>10</td>
	<td style='border:1px solid gray;width:25%;'>总手牌数量</td>
	<td style='border:1px solid gray;'>50</td>
	</tr>
	</table>
</div>




<div id='billingDetail' style='display:none'>
	<table style='border:1px solid gray;width:100%;' cellspacing=2 cellpadding=2>
	<tr>
	<td style='border:1px solid gray;width:25%'>账单号</td>
	<td style='border:1px solid gray;' colspan=3>2040316-0012-01</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:25%'>下单时间</td>
	<td style='border:1px solid gray;width:25%'>2014年3月16日13:02</td>
	<td style='border:1px solid gray;width:25%'>下单人</td>
	<td style='border:1px solid gray;'>S002</td>
	</tr>
	</table><br/>
	<table style='border:1px solid gray;width:100%' cellspacing=2 cellpadding=2>
	<tr>
	<td style='border:1px solid gray;width:20%;font-weight:bold'>名称</td>
	<td style='border:1px solid gray;width:15%;font-weight:bold'>数量</td>
	<td style='border:1px solid gray;width:25%;font-weight:bold'>下单信息</td>
	<td style='border:1px solid gray;;font-weight:bold'>操作</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:20%;'>浴足-牛奶</td>
	<td style='border:1px solid gray;width:15%;'>1</td>
	<td style='border:1px solid gray;width:25%;'>S002@09:21</td>
	<td style='border:1px solid gray;;'>
		<a href='#'>起钟</a>
		<a href='#'>取消</a>
		<a href='#'>换钟</a>
	</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:20%;'>浴足-薰衣草</td>
	<td style='border:1px solid gray;width:15%;'>1</td>
	<td style='border:1px solid gray;width:25%;'>S002@09:22</td>
	<td style='border:1px solid gray;;'>
		<a href='#'>起钟</a>
		<a href='#'>取消</a>
		<a href='#'>换钟</a>
	</td>
	</tr>
	<tr>
	<td style='border:1px solid gray;width:20%;'>绿豆沙</td>
	<td style='border:1px solid gray;width:15%;'>2</td>
	<td style='border:1px solid gray;width:25%;'>S002@09:23</td>
	<td style='border:1px solid gray;;'>
		<a href='#'>取消</a>
	</td>
	</tr>
	</table>
<button class='quik-btn'>上一页</button>
<span>1</span>/<span>1</span>
<button class='quik-btn'>下一页</button><br/>
<button class='quik-btn' onclick='operateTaggle(true)'>返&nbsp;&nbsp;&nbsp;&nbsp;回</button>
</div>
</td>
</tr>
</table>
</body>
</html>
